<template>
  <view :class="`container myDropDown`">
	  <view class="search">搜索</view>
	  <view class="custom">
		<up-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill" active-color="#2BA853" :menu-icon-size="8" class="dropdown" @change="dropDown">
			<up-dropdown-item :title="dropRadioKey">
				<view class="slot-content">
					<scroll-view scroll-y="true" style="height: 320rpx;">
						<up-radio-group 
						    v-model="dropRadioValue"
							iconPlacement="right"
							@change="radioChange"
						    placement="column">
							<template v-for="(item, index) in dropRadioMenu" :key="index">
								<up-radio :labelSize="14" labelColor="rgb(117 117 117)" :name="item.value" activeColor="#2BA853" :label="item.key"></up-radio>
							</template>
						</up-radio-group>
					</scroll-view>
				</view>
			</up-dropdown-item>
			<up-dropdown-item title="属性">
				<view class="slot-content">
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<template v-for="(item, index) in dropBtnMenu" :key="index">
							<view class="row">
								<view class="name">{{item.name}}</view>
								<view class="list">
									<template v-for="(it, idx) in item.data" :key="index">
										<view :class="`btn ${dropBtnValue[index].includes(it.value) ? 'active' : ''}`" @click="setKeyValue(index, it.value)">{{it.key}}</view>
									</template>
								</view>	
							</view>
						</template>
					</scroll-view>
					<view class="button-group">
						<up-button class="a" color="#F3F3F3" type="default" @click="cancel">重置</up-button>
						<up-button class="a b" color="#2BA853" type="primary" @click="cnfirm">确定</up-button>
					</view>
				</view>
			</up-dropdown-item>
		</up-dropdown>
	  </view>
  </view>
</template>
<script>
import { nextTick } from 'vue'
	
export default {
	components: {
		
	},
	data() {
		return {
			dropRadioKey: "综合排序",
			dropRadioValue: '1',
			dropRadioMenu: [{
				key: '综合排序',
				value: '1'
			}, {
				key: '离我最近',
				value: '2'
			}, {
				key: '价格最低',
				value: '3'
			}, {
				key: '价格最高',
				value: '4'
			}, {
				key: '好评优先',
				value: '5'
			}],
			dropBtnMenu: [{
				name: '分类1',
				data: [{
					key: '标签字段1',
					value: 1
				}, {
					key: '标签字段2',
					value: 2
				}, {
					key: '标签字段3',
					value: 3
				}, {
					key: '标签字段4',
					value: 4
				}, {
					key: '标签字段5',
					value: 5
				}, {
					key: '标签字段6',
					value: 6
				}, {
					key: '标签字段7',
					value: 7
				}]
			}, {
				name: '分类2',
				data: [{
					key: '标签字段1',
					value: 1
				}, {
					key: '标签字段2',
					value: 2
				}, {
					key: '标签字段3',
					value: 3
				}, {
					key: '标签字段4',
					value: 4
				}, {
					key: '标签字段5',
					value: 5
				}, {
					key: '标签字段6',
					value: 6
				}, {
					key: '标签字段7',
					value: 7
				}]
			}],
			dropBtnValue: [[], []]
		}
	},
	methods: {
		initDropMenuData(e) {
			// 初始化
			this.dropBtnValue = this.dropBtnMenu.map(item => [])
		},
		radioChange(e){
			console.log(e, 'radioChange', this.dropRadioMenu.filter(item => item.value == e)[0])
			this.closeDropdown()
			this.dropRadioKey = this.dropRadioMenu.filter(item => item.value == e)[0]['key']
		},
		setKeyValue(i, val){
			let dropBtnValue = this.dropBtnValue;
			if(dropBtnValue[i].includes(val)){
				this.dropBtnValue[i].remove(val)
			}else{
				this.dropBtnValue[i].push(val)
			}
		},
		cnfirm(e){
			// 创建一个函数来获取对应的数据
			const getItemsByValues = (menu, values) => {
			  return menu.map((category, index) => {
			    const items = category.data.filter(item =>
			      values[index].includes(item.value)
			    );
			    return { name: category.name, data: items };
			  });
			}
			// 使用函数获取对应的项
			const selectedItems = getItemsByValues(this.dropBtnMenu, this.dropBtnValue);
			console.log(selectedItems)
		},
		cancel(e) {
			this.initDropMenuData()
		},
		closeDropdown() {
			this.$refs.uDropdownRef.close();
		}
	},
	onShow() {}
}
</script>
<style lang="scss">
	.myDropDown{
		width: 100%;
		height: calc(100vh - 44px);
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		.search{
			width: 100%;
			height: 50px;
			background: green;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 6px;
		}
		.custom{
			width: 100%;
			
			.u-dropdown__menu{
				border-bottom: 1px solid #e5e5e5 !important;
			}
			.u-dropdown__menu__item{
				padding: 0px 15px;
				box-sizing: border-box;
				flex: none;
				color: #333;
				.u-dropdown__menu__item__text{
					font-weight: 600;
					color: #333 !important;
					font-size: 15px !important;
				}
				.u-dropdown__menu__item__arrow{
					margin-left: 5px;
					margin-top: 2px;
				
					.u-icon__icon{
						color: #333 !important;
					}
				}
			}
			.slot-content{
				padding: 10px 20px 10px 20px;
				box-sizing: border-box;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
				background: #fff;
				border-top: 1px solid #e5e5e5;
				display: flex;
				flex-wrap: wrap;
				.button-group{
					border-top: 1px solid #e5e5e5;
					width: 100%;
					padding-top: 10px;
					margin-top: 10px;
					display: flex;
					.a{
						width: 180px;
						color: #000 !important;
						border-radius: 35px;
					}
					.b{
						color: #fff !important;
					}
				}
				.row{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 10px;
					.name{
						width: 100%;
						height: 20px;
						line-height: 20px;
						font-size: 14px;
					}
					.list{
						width: 100%;
						display: flex;
						font-size: 14px;
						flex-wrap: wrap;
						margin-top: 10px;
						.btn{
							width: calc(25% - 10px);
							margin-right: 10px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							background: #F3F3F3;
							border-radius: 6px;
							margin-bottom: 10px;
							&.active{
								background: #2BA853;
								color: #fff;
							}
						}
					}
				}
			}
			.dropdown{
				// .u-dropdown__menu{
				// 	border-bottom: 1px solid #e5e5e5;
				// }
				
				
			}
			
		}
	}
</style>
